<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例_小练习</title>
  <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4694399_y10fqlab1as.css">
  <style>
    *{
      font-size: 14px;
      margin: 0;
      padding: 0;
      border: none;
      font-family: Arial serif;
    }

    a{
      text-decoration: none;
    }


    ul{
      list-style: none;
    }


    html,body{
      width: 100%;
      height: 100%;
    }


    body{
      background-image: url("../../resource/韩立1.png");
      background-repeat: no-repeat;
      /*图片和容器不匹配时,cover最优解*/
      background-size: cover;
    }


    .page-header{

      height: 8%;
      background-color: rgba(0,0,0,0.7) ;
      /*开启弹性布局*/
      display: flex;
      /*主轴对齐方式,两边顶死*/
      justify-content: space-between;
      padding: 2% 2%;
      overflow: hidden;
    }


    .page-header>a{
      font-size: 70px;
    }


    .page-header-list{
      display: flex;
      align-self: center;
    }


    .page-header-list li a{
      color: white;
      border: 1px white solid;
      border-radius: 10px;
      padding: 10px;
      margin-right:  20px;
      font-size: 30px;
    }


    .page-content{
      display: flex;
      height: calc(100vh - 70px);/*可以动态获取到值*/
     justify-content: center;
      align-items: center;
    }


    .content-nav{
        width:60%;
        height: 40%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;

    }

    .content-nav .item {
        width: 20%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    /*    过渡效果设置*/
        transition: linear 0.5s ;
    }


    .content-nav .item1 {
        background-image: url("../../resource/玄骨1.jpg");
    }
    .content-nav .item2 {
        background-image: url("../../resource/元瑶1.jpg");
    }
    .content-nav .item3 {
        background-image: url("../../resource/墨彩环.jpg");
    }
    .content-nav .item4 {
        background-image: url("../../resource/南宫婉1.jpg");
    }
    .content-nav .item5 {
        background-image: url("../../resource/陈巧倩.jpg");
    }

    .item span{
        font-size: 30px;
        color: rgba(255,255,255,0.5);

    }
    .item a{
        font-size: 20px;

    }

    .item:hover{
        transform: scale(1.5);
        cursor: pointer;
    }


  </style>
</head>
<body>
<!--  头部区域-->
<header class="page-header">
    <a href="#" class="iconfont  icon-img_home_tag_classify_2_color"></a>
    <ul class="page-header-list">
      <li><a href="">筑基期</a></li>
      <li><a href="">结丹期</a></li>
      <li><a href="">元婴期</a></li>
      <li><a href="">化神期</a></li>
    </ul>
  </header>

<!--  内容区-->
<div class="page-content">
  <div class="content-nav">
      <div class="item item1">
          <span>玄骨</span>
          <a href="#">查看个人经历</a>
      </div>
      <div class="item item2">
          <span>元瑶</span>
          <a href="#">查看个人经历</a>
      </div>
      <div class="item item3">
          <span>墨彩环</span>
          <a href="#">查看个人经历</a>
      </div>
      <div class="item item4">
          <span>南宫婉</span>
          <a href="#">查看个人经历</a>
      </div>
      <div class="item item5">
          <span>陈巧倩</span>
          <a href="#">查看个人经历</a>
      </div>
  </div>
</div>
</body>
</html>